<template>
  <div class="course-appraise">
    <div class="title">我的评价</div>
    <div class="postAReview">
      <button @click="goAppraise">发布评价</button>
    </div>
    <!-- 评价内容 -->
    <div class="appraise-content">
      <div class="title">共四条评论</div>

      <!-- 其他人评价列表 -->
      <div class="other-appraise-list">
        <div class="appraise-item" v-for="item in appraiseList" :key="item.id">
          <div class="appraise-header">
            <el-avatar :src="item.avatar" size="small" />
            <span class="nickname">{{ item.nickname }}</span>
            <span class="date">{{ item.date }}</span>
          </div>
          <!-- theStarIsNotSelected.svg -->
          <div class="appraise-rates-table">
            <div class="rate-row">
              <span class="rate-title">课程评价&nbsp;&nbsp;|</span>
              <span class="rate-label">难易程度</span>
              <ScoreRate v-model="item.difficulty" :max="5" disabled />
              <span class="rate-label">内容设置</span>
              <ScoreRate v-model="item.content" :max="5" disabled />
              <span class="rate-label">学习效果</span>
              <ScoreRate v-model="item.effect" :max="5" disabled />
            </div>
            <div class="rate-row">
              <span class="rate-title">教师评价&nbsp;&nbsp;|</span>
              <span class="rate-label">教师能力</span>
              <ScoreRate v-model="item.ability" :max="5" disabled />
              <span class="rate-label">课堂互动</span>
              <ScoreRate v-model="item.interaction" :max="5" disabled />
              <span class="rate-label">导师服务</span>
              <ScoreRate v-model="item.service" :max="5" disabled />
            </div>
          </div>
          <div
            class="appraise-content-text"
            :class="{ collapsed: !item.expanded }"
          >
            {{ item.contentText }}
          </div>
          <div class="more">
            <a href="#" @click.prevent="item.expanded = !item.expanded">
              {{ item.expanded ? "收起" : "查看更多" }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增：评价弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="我的评价"
    width="750px"
    align-center
  >
    <div class="appraise-dialog">
      <div class="title">课程评价</div>
      <el-row class="dialog-rate" align="middle">
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">难易程度：</span>
            <ScoreRate v-model="form.difficulty" :max="5" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">内容设置：</span>
            <ScoreRate v-model="form.content" :max="5" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">学习效果：</span>
            <ScoreRate v-model="form.effect" :max="5" />
          </div>
        </el-col>
      </el-row>
      <div class="title">教师评价</div>
      <el-row class="dialog-rate" align="middle">
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">教师能力：</span>
            <ScoreRate v-model="form.ability" :max="5" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">课堂互动：</span>
            <ScoreRate v-model="form.interaction" :max="5" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="dialog-rate-row">
            <span class="rate-label">教学服务：</span>
            <ScoreRate v-model="form.service" :max="5" />
          </div>
        </el-col>
      </el-row>
      <el-input
        v-model="form.contentText"
        type="textarea"
        :rows="4"
        placeholder="请输入"
      />
    </div>
    <template #footer>
      <el-button type="primary" @click="submitAppraise">确认</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

const dialogVisible = ref(false);
const form = ref({
  difficulty: 0,
  content: 0,
  effect: 0,
  ability: 0,
  interaction: 0,
  service: 0,
  contentText: "",
});

const goAppraise = () => {
  dialogVisible.value = !dialogVisible.value;
};

const submitAppraise = () => {
  // 这里可以提交表单数据
  dialogVisible.value = false;
  // 清空表单
  // form.value = {
  //     difficulty: 0,
  //     content: 0,
  //     effect: 0,
  //     ability: 0,
  //     interaction: 0,
  //     service: 0,
  //     contentText: ''
  // }
};

const appraiseList = ref([
  {
    id: 1,
    avatar:
      "https://img0.baidu.com/it/u=2290206551,2874094624&fm=253&fmt=auto&app=120&f=JPEG?w=778&h=500",
    nickname: "CatLover92",
    date: "2023/12/12 14:31",
    difficulty: 4,
    content: 3,
    effect: 5,
    ability: 5,
    interaction: 4,
    service: 5,
    contentText:
      "浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。浸入计划合计有 14 名大专学生参与，期望本课程可协助他们建立难度的编程知识及提升他们编程架构思考技巧。",
    expanded: false,
  },
  {
    id: 2,
    avatar:
      "https://img0.baidu.com/it/u=2290206551,2874094624&fm=253&fmt=auto&app=120&f=JPEG?w=778&h=500",
    nickname: "张老师",
    date: "2023/7/12 14:31",
    difficulty: 4,
    content: 4,
    effect: 5,
    ability: 4,
    interaction: 4,
    service: 5,
    contentText: "课程内容丰富，讲解细致。",
    expanded: false,
  },
]);
</script>

<style>
.appraise-dialog {
  width: 100%;
}

.appraise-dialog .title {
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 16px;
  color: #1e2021;
  text-align: left;
  margin-bottom: 14px;
}


.appraise-dialog .dialog-rate {
  margin-bottom: 30px;
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 16px;
  color: #656c7e;
  text-align: left;
}

.appraise-dialog .dialog-rate .dialog-rate-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.rate-label {
  margin-right: 4px;
  color: #666;
  font-size: 14px;
}

.dialog-rate {
  margin-bottom: 20px;
}
</style>

<style lang="less" scoped>
.course-appraise {
  width: 100%;

  .title {
    font-family: PingFang HK, PingFang HK;
    font-weight: 500;
    font-size: 16px;
    color: #1e2021;
  }

  .postAReview {
    margin-top: 50px;
    width: 100%;
    text-align: center;

    button {
      border: none;
      padding: 12px 33px;
      box-sizing: border-box;
      background: var(--theme-gradient-bg);
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      cursor: pointer;
    }
  }

  .appraise-content {
    width: 100%;
    margin-top: 50px;

    .title {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 16px;
      color: #1e2021;
    }

    .other-appraise-list {
      margin-top: 40px;

      .appraise-item {
        background: #f5f8fc;
        border-radius: 8px;
        padding: 16px;
        box-sizing: border-box;
        margin-bottom: 40px;

        .appraise-header {
          display: flex;
          align-items: center;

          .el-avatar {
            margin-right: 8px;
          }

          .nickname {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 14px;
            color: #1e2021;
          }

          .date {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 12px;
            color: #656c7e;
            margin-left: auto;
          }
        }

        .appraise-rates-table {
          margin-top: 16px;

          .rate-row {
            display: flex;
            align-items: center;
            margin-bottom: 16px;

            .rate-title {
              font-family: PingFang HK, PingFang HK;
              font-weight: 500;
              font-size: 14px;
              color: #656c7e;
            }

            .rate-label {
              margin: 0 4px 0 16px;
              color: #666;
              font-size: 14px;
              min-width: 60px;
            }

            .el-rate {
              margin-right: 8px;
            }
          }
        }

        .appraise-content-text {
          margin: 8px 0;
          font-size: 14px;
          color: #333;

          &.collapsed {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
          }
        }

        .more {
          text-align: right;
          margin-top: 16px;

          a {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 14px;
            color: var(--el-color-primary);
            line-height: 21px;
          }
        }
      }
    }
  }
}
</style>
